<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <input type="text" v-model="msg"> -->
        <input type="text" v-model="age">
        <p>{{info}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'time to eat',
                age: 17,
                info: ' loading。。。'
            },
            watch: {
                msg(val1, val2) {
                    console.log('new:', val1);
                    console.log('old:', val2);
                },
                age(val) {
                    if(val < 18) {
                        this.info = '未成年人禁止入内！'
                    }else if(val >=18 && val < 60) {
                        this.info = '你已经是成年人了，可以做成年人做的事了。。。'
                    }else {
                        this.info = '喜提退休金'
                    }
                },
                // colorVal()  颜值提高--yyqx fall in love--官宣--weibo 挂了--程序员加班--司机加班
            }
            // 普通函数、计算属性、侦听的区别，以及各自的使用场景
            // 普通函数，调用后就执行，调用几次就执行几次，没有缓存
            // 计算属性 多对一，多个因素作用下得到的一个结果，是data经过计算得到的一个新的数据
            // 侦听 一对多，一个核心因素的变化，导致后续多个事件的发生。监听核心因素的变化，采取行动
        })
    </script>
</body>
</html>